import React, { useCallback, useMemo } from 'react';
import { useLocalStore } from 'hooks';
import { observer } from 'mobx-react-lite';
import RootStore from 'store/RootStore';
import UserPageStore from 'store/UserPageStore';

import { PeopleIcon } from 'components/icons';
import Text, { TEXT_VIEW } from 'components/Text';
import { classnames } from 'utils';

import CardMini from './components/CardMini';
import ContributionsCollection from './components/ContributionsCollection';

import classes from './UserPage.module.scss';

const cnUserPage = classnames(classes, 'userPage');

const UserPage: React.FC = () => {
    const { fetchContributionsCollection, contributionsCalendar, contributionsYears, popularUserRepos, chosenYear } =
        useLocalStore(() => new UserPageStore());

    const userProfile = useMemo(() => RootStore.githubOAuth.userOwnProfile, []);

    const chooseCollectionYear = useCallback(
        (year: number) => () => {
            fetchContributionsCollection({ user: userProfile?.login ?? '', year: year });
        },
        [userProfile?.login],
    );
    return (
        <div className={cnUserPage()}>
            <div className={cnUserPage('profile')}>
                <div className={cnUserPage('user')}>
                    <img alt="profile img" src={userProfile?.avatarUrl} className={cnUserPage('user-image')} />
                    <div className={cnUserPage('user-bio')}>
                        <Text className={cnUserPage('user-bio-name')}>{userProfile?.name}</Text>
                        <Text view={TEXT_VIEW.p20} className={cnUserPage('user-bio-login')} color="secondary">
                            {userProfile?.login}
                        </Text>
                    </div>
                </div>
                <div className={cnUserPage('people')}>
                    <a
                        href={`https://github.com/${userProfile?.login}?tab=followers`}
                        className={cnUserPage('people-link')}
                    >
                        <PeopleIcon width={16} height={16} color="secondary" />
                        <Text>{userProfile?.followers ?? 0}</Text>
                        <Text color="secondary">follower</Text>
                    </a>
                    <a
                        href={`https://github.com/${userProfile?.login}?tab=following`}
                        className={cnUserPage('people-link')}
                    >
                        <Text>{`· ${userProfile?.following ?? 0}`}</Text>
                        <Text color="secondary">following</Text>
                    </a>
                </div>
            </div>
            <div className={cnUserPage('info')}>
                <Text view={TEXT_VIEW.p16} className={cnUserPage('info-title')}>
                    Popular repositories
                </Text>
                <div className={cnUserPage('popularRepos')}>
                    {popularUserRepos.map((repo) => (
                        <CardMini
                            key={repo.id}
                            id={String(repo.id)}
                            name={repo.name}
                            owner={repo.ownerLogin}
                            repoUrl={repo.htmlUrl}
                            language={repo.language}
                            stars={repo.stargazersCount}
                            publicRepo={!repo.private}
                        />
                    ))}
                </div>
                <Text view={TEXT_VIEW.p16} className={cnUserPage('contribCalendar-title')}>
                    {`${contributionsCalendar?.totalContributions} contributions in ${chosenYear}`}
                </Text>
                <div className={cnUserPage('contribCalendar')}>
                    <div className={cnUserPage('calendar')}>
                        {contributionsCalendar && (
                            <ContributionsCollection weeks={contributionsCalendar.weeks} year={chosenYear} />
                        )}
                    </div>
                    <div className={cnUserPage('calendar-years')}>
                        {contributionsYears.map((year) => (
                            <div
                                key={year}
                                className={cnUserPage('calendar-year')}
                                onClick={chooseCollectionYear(year)}
                            >
                                {year}
                            </div>
                        ))}
                    </div>
                </div>
            </div>
        </div>
    );
};

export default observer(UserPage);
